<template>
  <view class="pages">
    <h-line :height="tops" bgColor="#fff"></h-line>
    <view class="headerBox">
      <u-icon name="arrow-left" color="#333333" size="20" @click="toUp"></u-icon>
      <view class="searchBox">
        <view class="searchIcon">
          <u-icon name="search" color="#BDBDBD" size="24"></u-icon>
        </view>
        <input
          type="text"
          placeholder="请输入您要搜索的内容"
          placeholder-style="font-size: 28rpx;color: #999999;"
          @focus="toUp"
          :maxlength="26"
          v-model="searchValue"
        />
        <view class="closeIcon" v-if="searchValue" @click="toClearUp">
          <u-icon name="close-circle-fill" color="#BDBDBD" size="18"></u-icon>
        </view>
      </view>
    </view>
    <view class="section">
      <view v-if="patientList.length" class="patient_list_box">
        <view
          class="patient_list"
          v-for="(item, index) in patientList"
          :key="index"
          @click="toPatienDetails(item)"
        >
          <image :src="item?.avatar" mode="scaleToFill" />
          <view
            class="patient_list_right"
            :style="{ border: index == patientList.length - 1 ? '0' : '1' }"
          >
            <view class="patient_info">
              <view class="patient_info_name">{{ item?.nickname }}</view>
              <!-- <view class="patient_info_sex">
                <text>{{ item.sex }}</text>
                <view class="info_leng"></view>
                <text>{{ item.age }}岁</text>
              </view> -->
            </view>
            <!-- <view class="see_doctor_time">
              <view>最近就诊：</view>
              <text>{{ item?.last_chat_time }}</text>
              <view style="margin-left: 10rpx">{{ item?.chat_time }}</view>
            </view> -->
            <view class="patient_tag">
              <view v-for="(i, n) in item.lable" :key="n">
                <view class="tag_item" :class="{ yun_tag: i.type == 1 }">{{ i.text }}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="sec_none" v-show="patientList.length == 0">
        <!-- <image src="@/static/patient/no_patient.png"></image> -->
        <view class="sec_none_text">暂时没有找到相关用户</view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { formatDate } from '@/utils/utils'
import { useMemberStore, useSystemStore } from '@/stores'
import { ref, onMounted, watch } from 'vue'
import {
  onLoad,
  onPullDownRefresh,
  onReachBottom,
  onReady,
  onShow,
  onPageScroll,
  onUnload,
  onHide,
  onBackPress,
} from '@dcloudio/uni-app'
import { navigateTo, navigateBack } from '@/utils/index'
import { getpatientData } from '@/api/patients/index'
const login = ref(null) // 登录组件实例
const store = useMemberStore()
var token = store?.token
const tops = ref(0)
const searchValue = ref('')
const getpatientPreams = ref({
  page: 1,
  limit: 10,
  words: '',
  type:1
})
//最总页
const last_page = ref(0)
const articleList = ref([])
const indicatorStyle = ref('height: 50px;color:#333;')
const timeShow = ref(false)
const patientList = ref([])
var props = defineProps({
  searchValue: String,
  dateTime: String,
  meal: String,
  type:String
})
searchValue.value = props?.searchValue
//登录
function updateInfo() {
  const store = useMemberStore()
  token = store?.token
}

onBackPress((o) => {
  console.log('from:' + o)
  return false
})
onReady(() => {
  uni.getSystemInfo({
    success: (e) => {
      tops.value = e.statusBarHeight * 2
    },
  })
})
onShow(async () => {
  patientList.value = []
  getpatientPreams.value.page = 1
  last_page.value = 1
  if (props?.searchValue) {
    getpatientPreams.value.words = props?.searchValue
    getpatientPreams.value.type = props?.type
    getpatientList()
  }
})
async function getpatientList() {
  const res = await getpatientData(getpatientPreams.value)
  if (res?.code == 200) {
    let list = res.data.data.map((item) => {
      item.key = 'chat_time'
      if (item.sex == 0) {
        item.sex = '女'
      } else {
        item.sex = '男'
      }
      return item
    })
    last_page.value = res.data.last_page
    patientList.value =
      getpatientPreams.value.page < last_page.value ? list : patientList.value.concat(list)
    patientList.value = [...new Set(patientList.value)]
  }
}
function toUp() {
  uni.redirectTo({
    url: `/patients/search/index?keywords=${searchValue.value}&type=${props?.type}`
  })
}

function toClearUp() {
  uni.redirectTo({
    url: '/patients/search/index?type=' + props?.type,
  })
}
//去详情
function toPatienDetails(row) {
  if(row?.type == 1){
    navigateTo(`/patients/info/index?userId=${row?.uid}`)
  } else if(row?.type == 2){
    navigateTo(`/patients/info/manIndex?userId=${row?.uid}`)
  }else{
    navigateTo(`/patients/info/pediatrics?userId=${row?.uid}`)
  }
}
</script>

<style lang="scss" scoped>
.pages {
  width: 100%;
  min-height: 100vh;
  background: #f5f6f8;
  font-family: PingFangSC, PingFang SC;
}
.topCen {
  width: 350rpx;
  margin: 0 auto;
  height: 100%;
  z-index: 1;
  padding: 10rpx 0;
  box-sizing: border-box;
  .head_data {
    width: 300rpx;
    margin: 0 auto;
    height: 64rpx;
    font-size: 36rpx;
    font-family: PingFang-SC-Heavy, PingFang-SC;
    font-weight: 800;
    color: #333333;
    line-height: 64rpx;
    text-align: center;
    .head_data_img {
      width: 18rpx;
      height: 12rpx;
      margin-left: 10rpx;
      position: relative;
      top: -6rpx;
    }
  }
}
.headerBox {
  display: flex;
  align-items: center;
  padding: 20rpx 24rpx;
  position: sticky;
  top: 0;
  left: 0;
  background: #fff;
  z-index: 9999;
  .searchBox {
    margin-left: 20rpx;
    width: 639rpx;
    height: 64rpx;
    background: #f6f6f6;
    border-radius: 32rpx;
    position: relative;
    input {
      width: 639rpx;
      height: 64rpx;
      background: #f6f6f6;
      border-radius: 32rpx;
      padding: 0rpx 70rpx 0rpx 76rpx;
      font-size: 28rpx;
      color: #333333;
    }
    .searchIcon {
      position: absolute;
      left: 20rpx;
      top: 9rpx;
    }
    .closeIcon {
      position: absolute;
      right: 20rpx;
      top: 14rpx;
      z-index: 10;
    }
  }
}

.section {
  margin-top: 20rpx;
  .patient_list_box {
    width: 702rpx;
    background: #ffffff;
    border-radius: 20rpx;
    margin: 0 auto;
    padding: 20rpx;
    .patient_list {
      display: flex;
      align-items: center;
      justify-content: space-between;
      image {
        width: 150rpx;
        height: 150rpx;
        border-radius: 10rpx;
      }
      .patient_list_right {
        width: 492rpx;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-around;
        border-bottom: 1rpx solid #e8e8e8;
        height: 160rpx;
        padding: 16rpx 0;
        .patient_info {
          display: flex;
          align-items: flex-end;
          .patient_info_name {
            font-size: 30rpx;
            color: #202020;
          }
          .patient_info_sex {
            display: flex;
            align-items: center;
            font-size: 26rpx;
            color: #00c1b9;
            text {
              margin: 0 12rpx;
            }
            .info_leng {
              height: 22rpx;
              width: 1rpx;
              background: #aaaaaa;
            }
          }
        }
        .see_doctor_time {
          display: flex;
          align-items: center;
          color: #5c5c5c;
          font-size: 26rpx;
        }
        .patient_tag {
          display: flex;
          .tag_item {
            height: 40rpx;
            background: #ffffff;
            border-radius: 19rpx;
            border: 1rpx solid #54CEAB;
            padding: 0 10rpx;
            font-size: 24rpx;
            line-height: 40rpx;
            color: #54CEAB;
            margin-right: 10rpx;
          }
          .yun_tag {
            border-color: #54CEAB;
            color: #54CEAB;
          }
        }
      }
    }
  }
}
.sec_list:last-of-type {
  border-bottom: none;
}
.sec_none {
  text-align: center;
  image {
    width: 226rpx;
    height: 204rpx;
    margin-top: 400rpx;
  }
  .sec_none_text {
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 26rpx;
    color: #ababab;
    line-height: 36rpx;
    margin-top: 200rpx;
  }
}
.time_box {
  width: 100%;
  .time_box_title {
    font-family: PingFang SC, PingFang SC;
    font-weight: 600;
    font-size: 28rpx;
    color: #333333;
    line-height: 33rpx;
    text-align: center;
    padding-top: 30rpx;
    padding-bottom: 20rpx;
  }
  .picker-view {
    width: 750rpx;
    height: 500rpx;
  }
  .item {
    width: 375rpx;
    line-height: 85rpx;
    text-align: center;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 36rpx;
    color: #333333;
  }
  .time_box_btn {
    width: 702rpx;
    height: 88rpx;
    background: linear-gradient(90deg, #cb9fff 0%, #a28aff 100%);
    border-radius: 44rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 600;
    font-size: 28rpx;
    color: #ffffff;
    line-height: 88rpx;
    text-align: center;
    margin: 50rpx auto;
  }
}
</style>
